<template>
    <div class="white-box">
        <!-- <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">站内信标题：</span>
                <el-input placeholder="输入标题搜索" v-model.trim="search_text" size="default" clearable></el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div> -->

        <div class="table-mb">
            <el-button type="primary" plain :icon="Delete" @click="allDel">批量删除</el-button>
            <el-button type="primary" :icon="CirclePlus" @click="handleAdd">添加</el-button>
        </div>
        <el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)" @selection-change="handleAllSelected">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="article_id" label="ID" width="80"> </el-table-column>
            <el-table-column prop="message" label="站内信内容" min-width="200"> </el-table-column>
            <el-table-column prop="tenant_title" label="接收用户" width="200"> </el-table-column>
            <el-table-column prop="on_time_label" label="发布时间" width="160"> </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="handleEdit(row)">编辑
                    </el-button>
                    <el-popconfirm title="确定删除站内信吗？" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary" style="margin-left: 14px">删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
            :total="totalNums" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 添加/修改 -->
        <el-dialog v-model="dialogUpdate" :title="tenant_type == 1 ? '添加站内信' : '编辑站内信'" width="600px" :append-to-body="true"
            :destroy-on-close="true" :close-on-click-modal="false" @close="closeTenant">
            <div>
                <el-form ref="ruleTenantRef" :model="ruleTenantForm" :rules="ruleCheckTenant" label-width="120px">
                    <el-form-item label="接收用户" prop="tenant_id">
                        <el-select v-model="ruleTenantForm.tenant_id" multiple collapse-tags collapse-tags-tooltip clearable
                            placeholder="请选择接收用户" :disabled="tenant_type == 2" @change="changeSelect">
                            <el-option v-for="item in tenantArrs" :key="item.tid" :label="item.label" :value="item.tid" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="站内信内容" prop="message">
                        <el-input v-model="ruleTenantForm.message" type="textarea" :rows="6" clearable
                            placeholder="请输入站内信内容" />
                    </el-form-item>
                    <el-form-item>
                        <div class="submit-foot">
                            <el-button type="primary" :loading="form_loading" @click="submitTenantForm(ruleTenantRef)">
                                {{ tenant_type == 1 ? '确认添加' : '立即保存' }}
                            </el-button>
                            <el-button @click="resetTenantForm(ruleTenantRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, watch, onBeforeUnmount } from "vue"
import OneLoad from "@mixins/one-load"
import { Delete, CirclePlus } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    // getList();
})
//清除
onBeforeUnmount(() => {
    
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_text, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})
loading.value = false
arr_data.value = [{
    article_id: 1,
    message: '发给特定用户的信息',
    tenant_title: '张三，李四',
    tenant_id: [2, 3],
    on_time_label: '2022-07-11 09:36:00'
}, {
    article_id: 2,
    message: '发给全体用户信息',
    tenant_id: [1],
    tenant_title: '全体用户',
    on_time_label: '2022-07-11 09:36:00'
}]
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: search_text.value
    }
    getdata("article/index", params)
}

// 搜索
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * 获取用户
 * @param {Array} tenantArrs 轮播图数组
 * @param {Function} getTenants 获取用户
 */
const tenantArrs = ref([{
    tid: 1,
    label: '全部用户'
}, {
    tid: 2,
    label: '张三'
}, {
    tid: 3,
    label: '李四'
}])
function getTenants() {
    proxy.$axios.get('').then(res => {
        if (res.data.code == 0) {

        } else {
            Toast(res.data.msg)
        }
    }).catch(err => { })
}
const changeSelect = (val) => {
    console.log('val', val);
}

/**
 * 添加/编辑租户弹窗
 * @param {Boolean} form_loading 弹窗提交按钮状态
 * @param {Boolean} dialogUpdate 弹窗状态
 * @param {Number} tenant_type 1是添加，2是编辑
 * @param {Array} ruleTenantRef 表单规则
 * @param {Object} ruleTenantForm  表单字段
 * @param {Object} ruleCheckTenant  表单提示
 * @param {Function} submitTenantForm 保存
 * @param {Function} closeTenant 关闭
 */
const form_loading = ref(false)
const dialogUpdate = ref(false)
const tenant_type = ref(1)
const handleAdd = () => {
    tenant_type.value = 1
    dialogUpdate.value = true
}
const handleEdit = (row) => {
    dialogUpdate.value = true
    setTimeout(() => {
        tenant_type.value = 2
        ruleTenantForm.id = row.article_id
        ruleTenantForm.message = row.message
        ruleTenantForm.tenant_id = row.tenant_id
    }, 50);
}
const ruleTenantRef = ref(null)
const ruleTenantForm = reactive({
    id: '',
    tenant_id: [],
    message: ''
})
const ruleCheckTenant = reactive({
    message: [{ required: true, message: "请输入站内信内容", trigger: "blur" }],
    tenant_id: [{ required: true, message: "请选择接收用户", trigger: "change" }],
})
const submitTenantForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            let data = {
                department_name: depart_text.value,
            }
            if (tenant_type.value == 2) {
                data.department_id = depart_id.value
            }
            let url = tenant_type.value == 1 ? 'department/add' : 'department/editMessage';
            proxy.$axios
                .post(url, data).then((res) => {
                    dialogUpdate.value = false;
                    if (res.data.code == 0) {
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                }).catch((err) => { })
        }
    })
}
const resetTenantForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closeTenant = () => {
    dialogUpdate.value = false
    resetTenantForm(ruleTenantRef.value)
}

// 删除单个
const handleDelete = (row) => {
    postDel(row.article_id)
}
// 删除多个
const ids = ref([])
const handleAllSelected = (val) => {
    ids.value = val
}
const allDel = () => {
    if (ids.value.length == 0) {
        proxy.$message({ message: "请选择需要删除的数据", type: "warning" })
        return
    }
    let arrs = []
    for (let i = 0; i < ids.value.length; i++) {
        arrs.push(ids.value[i].article_id)
    }
    postDel(arrs)
}
// 删除接口
function postDel(params) {
    proxy.$axios
        .post("article/delete", {
            article_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => { })
}

</script>
<script>
export default {
    name: "Mail",
}
</script>

<style lang="less" scoped></style>